<template>
  <div class="home">
    <v-header :seller="seller"></v-header>
    <div class="tab-wrapper">
      <tab :tabs="tabs"></tab>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import VHeader from '../components/v-header/v-header'
import { getSeller } from '../api'
import Tab from '../components/tab/tab'
import Goods from '../components/goods/goods'
import Ratings from '../components/ratings/ratings'
import Seller from '../components/seller/seller'
import qs from 'query-string'

export default {
  name: 'Home',
  data () {
    return {
      seller: {
        id: qs.parse(location.search).id
      }
    }
  },
  computed: {
    tabs () {
      return [
        {
          label: '商品',
          component: Goods,
          data: {
            seller: this.seller
          }
        },
        {
          label: '评论',
          component: Ratings,
          data: {
            seller: this.seller
          }
        },
        {
          label: '商家',
          component: Seller,
          data: {
            seller: this.seller
          }
        }
      ]
    }
  },
  created () {
    this._getSeller()
  },
  methods: {
    _getSeller () {
      getSeller().then(res => {
        this.seller = res
      })
    }
  },
  mounted () {
  },
  components: {
    Tab,
    VHeader
  }
}
</script>

<style lang="stylus" scoped>
.tab-wrapper
  position: fixed
  top: 136px
  left: 0
  right: 0
  bottom: 0
</style>
